<form role="form" class="form-inline">
  <div class="container-fluid">
    <div class="row">
      <div class="input-group form-group finder-form col-md-9">
        <span class="input-group-addon">
          <i class="fa fa-search"></i>
        </span>
        <input
          input-focus
          ng-model="query"
          placeholder="Filter..."
          class="form-control"
          name="query"
          type="text"
          autocomplete="off" />
      </div>
      <div class="finder-hit-count col-md-3">
        <span>{{ (hits | filter: query).length }} of {{ hitCount }}</span>
      </div>
    </div>
  </div>
</form>
<paginate list="hits | filter: query" per-page="{{ perPage }}">
  <ul class="li-striped list-group list-group-menu">
    <li class="list-group-item" ng-click="sortHits(hits)">
      <span class="paginate-heading">
        Name
        <i class="fa" ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'"></i>
      </span>
    </li>
    <li class="list-group-item list-group-menu-item" ng-repeat="hit in page">
      <a ng-show="userMakeUrl" kbn-href="{{ makeUrl(hit) }}">
        <span>{{ hit }}</span>
      </a>
      <div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
        <span>{{ hit }}</span>
      </div>
    </li>
    <li class="list-group-item list-group-no-results" ng-if="(hits | filter: query).length === 0">
      <p>No matches found.</p>
    </li>
  </ul>
</paginate>
